<template>
  <div>
    <a-modal
      :title="title"
      centered
      :visible="visible"
      @cancel="handleCancel"
      :maskClosable="false"
      :footer="null"
      :bodyStyle="bodyStyle"
    >
      <component
        v-if="refresh"
        v-bind:is="component"
        @success="success"
        :model.sync="componentModel"
      >
      </component>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    component: {
      default: ""
    },
    title: {
      default: ""
    },
    dialogVisible: {
      default: false
    },
    componentModel: {
      default: ""
    }
  },
  data() {
    return {
      refresh: true,
      closeByModal: false,
      visible: false,
      bodyStyle: {
        "max-height": "80vh",
        overflow: "auto"
      }
    };
  },
  watch: {
    dialogVisible(val) {
      this.visible = val;
    },
    visible() {
      this.refresh = false;
      this.$nextTick(() => {
        if (this.visible === true) {
          this.refresh = true;
        }
      });
    }
  },
  methods: {
    handleCancel() {
      this.visible = false;
      this.$emit("update:dialogVisible", false);
    },
    success(raw) {
      this.visible = false;
      this.$emit("update:dialogVisible", false);
      this.$emit("success", raw);
    }
  }
};
</script>

<style lang="scss" scoped></style>
